<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格布局</title>
</head>
<body>
<!--创建两行三列表格-->
    <table border="5" width="500px" bgcolor="#f8f8ff" cellspacing="0" cellpadding="5" align="center">
    <caption>前端工程师平均工资</caption>
    <thead>
    <tr bgcolor="#ffe4c4">
        <th rowspan="2">城市</th>
        <th colspan="2">2014</th>
        <th rowspan="2">2015</th>
        <th rowspan="2">2016</th>
    </tr>
    <tr bgcolor="#ffe4c4">
        <th>上半年</th>
        <th>下半年</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center" valign="middle">
        <td bgcolor="#f5f5dc">北京</td>
        <td>8000</td>
        <td>9000</td>
        <td>10000</td>
        <td>12000</td>
    </tr>
    <tr align="center" valign="middle">
        <td bgcolor="#f5f5dc">上海</td>
        <td>8000</td>
        <td>9000</td>
        <td>10000</td>
        <td>12000</td>
    </tr>
    </tbody>
    <tfoot>
    <tr align="center" valign="middle">
        <td bgcolor="#f5f5dc">合计</td>
        <td>8000</td>
        <td>9000</td>
        <td>10000</td>
        <td>12000</td>
    </tr>
    </tfoot>
</table>
    <table width="100%" bgcolor="#f2f2f2">
        <tr height="80px" bgcolor="#14191e"><td>11</td></tr><!--页头-->
        <tr height="10px"><td></td></tr><!--上空行-->
        <tr><td>
            <table align="center" width="1024px">
                <tr>
                    <td width="240px">
                        <table width="100%" valign="top"  bgcolor="#ffffff" >
                            <tr><td align="center" height="60px">关于我们</td></tr>
                            <tr><td align="center" height="60px">团队介绍</td></tr>
                            <tr><td align="center" height="60px">人才招聘</td></tr>
                            <tr><td align="center" height="60px">讲师招募</td></tr>
                            <tr><td align="center" height="60px">联系我们</td></tr>
                            <tr><td align="center" height="60px">常见问题</td></tr>
                            <tr><td align="center" height="60px">意见反馈</td></tr>
                            <tr><td align="center" height="60px">友情链接</td></tr>
                        </table>
                    </td><!--左内容-->
                    <td width="20px"></td><!--空隙-->
                    <td width="764px" bgcolor="#ffffff">
                        <pre>
  什么是慕课（MOOC）
  源于国外，Massive（大规模）Open（开放）Online（在线）Course（课程）。
  慕课网是什么MOOC
  专注做好IT技能教育的MOOC，符合互联网发展潮流接地气儿的MOOC。
  我们免费，我们只教有用的，我们专心做教育。
  为什么做慕课网
  慕课网的小伙伴希望所有热爱互联网的同学能更加便捷的获取学习资源，
  用互联网思维改变我们的学习。
  我们提供最新的知识，帮你应对变化的世界！
  慕课网在做什么
  做更多实用的课程，做更好体验的产品，研究更牛的技术！
  慕课网的追求是什么
  让更多热爱互联网的同学来慕课网学习，
  多年以后，圈子里一批技术牛说：我在慕课网学习过，这就够了。
  慕课网有移动端吗
  有啊，手机端、iPad版请扫描下方二维码下载
  iPhone
  Android
  iPad
  慕课网的大佬是谁
  慕课网隶属于北京慕课科技中心(有限合伙)，是一家从事互联网免费教学的网络教育公司。
  秉承“开拓、创新、公平、分享”的精神，将互联网特性全面的应用在教育领域，
  致力于为教育机构及求学者打造一站式互动在线教育品牌
  想及时沟通，请加慕粉QQ群，咱们当面聊！
  群7: 416465236
  Java群: 6200344
  Php群: 42125527
  web前端群3: 249860541
  安卓群: 232465453
  在校生群: 187845234
</pre>
                    </td><!--右内容-->
                </tr>
            </table>
        </td></tr><!--主题内容-->
        <tr height="10px"><td></td></tr><!--下空行-->
        <tr height="80px" bgcolor="#14191e"><td>111111</td></tr><!--页脚-->
    </table>
</body>
</html>